﻿.branch-start-node {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .branch-start-node .top {
        display: flex;
        height: calc(var(--wf-node-line-length) / 2);
    }

        .branch-start-node .top .branch-left-line,
        .branch-start-node .top .branch-center-line,
        .branch-start-node .top .branch-right-line {
            position: relative;
            height: 100%;
        }

        .branch-start-node .top .branch-left-line,
        .branch-start-node .top .branch-right-line {
            flex-grow: 1;
        }

        .branch-start-node .top .branch-center-line .v-line {
            position: absolute;
            left: calc(50% - 1px);
            width: 2px;
            height: 100%;
            border-left: 2px solid var(--wf-node-line-color);
        }

        .branch-start-node .top .branch-left-line .h-line,
        .branch-start-node .top .branch-right-line .h-line {
            position: absolute;
            top: 0;
            width: calc(100% + 10px);
            height: 2px;
            border-top: 2px solid var(--wf-node-line-color);
        }

        .branch-start-node .top .branch-left-line .h-line {
            right: 0;
        }

    .branch-start-node .center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .branch-start-node .center .content-container {
            position: relative;
        }

            .branch-start-node .center .content-container .node-outline-content {
                width: var(--wf-node-outline-width);
                height: var(--wf-node-outline-height);
                border: 1px solid var(--wf-node-border-color);
                border-radius: var(--wf-node-border-radius);
                background-color: var(--wf-node-border-color);
            }

            .branch-start-node .center .content-container ::deep .action {
                position: absolute;
                z-index: 1;
            }

            .branch-start-node .center .content-container .content ::deep .action {
                position: relative;
            }

            .branch-start-node .center .content-container ::deep .action.branch-delete-action {
                left: calc(50% - 8px);
                top: -16px;
            }

            .branch-start-node .center .content-container ::deep .action.branch-cut-action {
                left: calc(50% + 12px);
                top: -16px;
            }

            .branch-start-node .center .content-container ::deep .action.branch-move-left-action {
                left: -20px;
                top: calc(50% - 8px);
            }

            .branch-start-node .center .content-container ::deep .action.branch-move-right-action {
                right: -20px;
                top: calc(50% - 8px);
            }

            .branch-start-node .center .content-container:hover ::deep .action.hidden-action {
                visibility: visible;
                transition: none;
            }

            .branch-start-node .center .content-container ::deep .action.hidden-action {
                visibility: hidden;
                transition-property: visibility;
                transition-delay: 0.2s;
            }

    .branch-start-node.detail-view-mode .center .content-container ::deep .action.branch-delete-action,
    .branch-start-node.detail-view-mode .center .content-container ::deep .action.branch-cut-action {
        top: -8px;
    }

    .branch-start-node .bottom {
        position: relative;
        display: flex;
        align-items: center;
        height: var(--wf-node-line-length);
    }

        .branch-start-node .bottom .v-line {
            position: absolute;
            left: calc(50% - 1px);
            width: 2px;
            height: 100%;
            border-left: 2px solid var(--wf-node-line-color);
        }

        .branch-start-node .bottom ::deep .action {
            position: absolute;
            bottom: calc(var(--wf-node-line-length) / 2 - 8px);
            left: calc(50% - 8px);
            z-index: 1;
        }
